Ext.onReady(function(){

        // NOTE: This is an example showing simple state management. During development,
        // it is generally best to disable state management as dynamically-generated ids
        // can change across page loads, leading to unpredictable results.  The developer
        // should ensure that stable state ids are set for stateful components in real apps.
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        
       var viewport = new Ext.Viewport({
            layout:'border',
            items:[
                {
                    region:'north',
                    el: 'north',
                    height:40, 
                    html: "<a href='/PictureCentral/'><img src='/PictureCentral/images/pic_central_logo.gif'></img></a>"
       			},
                {
                    region:'west',
                    id:'west-panel',
                    title:'Actions',
                    split:true,
                    width: 200,
                    minSize: 175,
                    maxSize: 400,
                    collapsible: true,
                    margins:'0 0 0 5',
                    layout:'accordion',
                    layoutConfig:{
                        animate:true
                    },                    
                    items: [{
                    	id: 'categories',  
                    	contentEl:'west',
                        title:'Categories',
                        border:false,
                        items: {
                      	   id:'categoryActions',
                           autoScroll:true,
                           autoLoad: pictureCatgories.loadCategoryActions
                        }
                      },{
                    	id: 'acountInfoActions',
                        title:'Account Info Actions',
                        html:"<a href='/PictureCentral/authentication/logout' alt='Logout'>Logout</a>",
                        border:false
                      }
                   ]
                },
                new Ext.Panel({
                    region:'center',
                    deferredRender:false,
                    autoScroll:true,
                    items:[{
                        contentEl:'center',
                        id:'picture-grid',
                        autoScroll:true,
                        autoLoad: ps_centerpanel
                    }]
                }),
                new Ext.Panel({
                    region:'east',
                    el:'east',
                    title:'Shopping Cart',
                    width:202,
                    minSize:175,
                    items: {
                    	id: 'shoppingCartContent',
                    	autoScroll:true,
                    	autoLoad: shoppingcartHelper.displayCart                                        
                    }	
                })
             ]
        });
  });
 
